<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/quesManage' }">问卷列表</el-breadcrumb-item>
            <el-breadcrumb-item>问卷详情</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form ref="paperData" :model="paperData" style="margin-top: 20px">
            <el-form-item prop="title" :rules="{ required: true, message: '请填写问卷标题', trigger: 'change' }">
                问卷标题：
                <el-input
                        type="text"
                        placeholder="输入标题"
                        v-model="paperData.title"
                        style="max-width: 250px;">
                    {{paperData.title}}
                </el-input>
            </el-form-item>

            <el-form-item prop="descri" :rules="{ required: true, message: '请填写问卷描述信息', trigger: 'change' }">
                问卷描述：
                <el-input
                        type="text"
                        placeholder="输入标题"
                        v-model="paperData.descri"
                        style="max-width: 250px;">
                    {{paperData.descri}}
                </el-input>
            </el-form-item>
            <el-form-item prop="startTime">
                <el-date-picker

                        size="small"
                        v-model="paperData.startTime"
                        align="right"
                        type="date"
                        placeholder="选择开始日期"
                        :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>
            <el-form-item prop="endTime">
                <el-date-picker
                        size="small"
                        v-model="paperData.endTime"
                        align="right"
                        type="date"
                        placeholder="选择结束日期"
                        :picker-options="pickerOptions"
                       >
                </el-date-picker>
            </el-form-item>

            <el-divider/>
            <div class="header" style="font: 15px Extra Small;">
                问卷内容：
            </div>
            <br>
            <span v-for="(question,index) in questionsPage"
                  :key="question.questionNo">
                第{{question.questionNo}}题
                <span v-if="question.questionType === '1'">
                (单选题)：
                </span>
                 <span v-else-if="question.questionType === '2'">
                (多选题)：
                </span>
                 <span v-else="question.questionType === '3'">
                (问答题)：
                </span>
                <span>{{question.questionTitle}}</span>
                <br/>
                <br/>
                <span v-for="(questionOption,index2) in question.questionOption"
                      style="width: 520px;display: inline-block;">
                    <span v-if="index2+1 === 1">A</span>
                    <span v-if="index2+1 === 2">B</span>
                    <span v-if="index2+1 === 3">C</span>
                    <span v-if="index2+1 === 4">D</span>
                    <span v-if="index2+1 === 5">E</span>
                    <span v-if="index2+1 === 6">F</span>
                    <span> . {{questionOption}}==>qeqewqwqewq</span>
                    <br/>
                </span>
               
            </span>

            <el-divider/>
            <!--分页-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20, 50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="paperData.questions.length">
            </el-pagination>


        </el-form>
    </div>
</template>

<script>
    export default {
        name: "update",
        data(){
            return {
                paperData:{
                    title:'',
                    descri:'',
                    startTime:'',
                    endTime:'',
                    },
                paperData:[],
                show3: false,
                english:['A','B','C','D','E','F','G'],
                //分页
                currentPage:1, //初始页
                pageSize:10,    //每页的数据
                //数据显示
                isShow: false,
                buttonType: 'warning',
            }
        },
        created() {
            console.log("this.$route.params==>",this.$route.params);
            this.paperData = this.$route.params;
            console.log("paperData==>",this.paperData);
        },
        methods: {
            // 初始页currentPage、初始每页数据数pagesize和数据data
            handleSizeChange: function (size) {
                this.pageSize = size;
                console.log(this.pageSize)  //每页下拉显示数据
            },
            handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
            },

            //选择日期
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },
            //时间转换
            changeDate() {
                console.log(this.date);
                const transfer = date => `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} 00:00:00`;
                console.log("transfer",transfer);
                let startTime = transfer(this.date[0]);
                let endTime = transfer(this.date[1]);
                const newPaperInfo = {
                    // ...this.paperInfo,
                    startTime,
                    endTime
                };
                console.log(newPaperInfo);
            },
        },
        computed:{//分页
            questionsPage:function(){
                return this.paperData.questions.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize);
            }
        }
    }
</script>

<style scoped>
    .transition-box {
        margin-bottom: 10px;
        width: 200px;
        height: 100px;
        border-radius: 4px;
        background-color: #409EFF;
        text-align: center;
        color: #fff;
        padding: 40px 20px;
        box-sizing: border-box;
        margin-right: 20px;
    }

    .el-pagination {
        text-align: center;
    }

</style>